<template>
    <div ref="chartBox" class="chart-box" id="chart" :style="{ width: chartWidth + 'px', height: chartHeight + 'px' }">
    </div>
    <div ref="chartTip" v-if="chartTipShow" class="chart-tip">
        <input type="number" @keyup.enter="handleEnter" v-model="curValue">
    </div>

    <div class="full-screen" v-show="showFullScreen" ref="fullScreen">
        <el-icon @click="chartFullScreen">
            <FullScreen />
        </el-icon>
    </div>

    <full-chart ref="fullChartDom"></full-chart>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import * as echarts from 'echarts';
import { riqiList, yuliangList, shishiList } from './data.js'
import FullChart from '@/components/FullChart/index.vue'

let chartBox = ref(null)

let showFullScreen = ref(false) // 是否显示全屏图标
let fullScreen = ref(null) // 全屏图标对象

let chartWidth = ref(800);
let chartHeight = ref(600);

// 图表上的弹窗
let chartTip = ref(null)
let chartTipShow = ref(true) // 是否显示弹窗
let curValue = ref(null) // 当前输入框中的值
let curObj = reactive(null) // 当前选中的点对象

let seriesList = reactive(['实时流量', '雨量', '计算流量']);

// 计算流量
const jisuanList = []
for (let i = 0; i < shishiList.length; i++) {
    jisuanList.push(shishiList[i] + Math.floor(Math.random() * 30));
}

const drawChart = () => {
    const chartDom = document.getElementById('chart');
    const myChart = echarts.init(chartDom);
    const option = {
        title: {
            text: '雨量流量关系图',
            left: 'center'
        },
        grid: {
            bottom: 80
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                animation: false,
                label: {
                    backgroundColor: '#505765'
                }
            }
        },
        legend: {
            data: seriesList,
            left: 10
        },
        dataZoom: [
            {
                show: true,
                realtime: true,
                start: 0,
                end: 2
            },
            {
                type: 'inside',
                realtime: true,
                start: 0,
                end: 2
            }
        ],
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                axisLine: { onZero: false },
                data: riqiList.map(function (str) {
                    return str.replace(' ', '\n');
                })
            }
        ],
        yAxis: [
            {
                name: '流量(m³/s)',
                type: 'value'
            },
            {
                name: '雨量(mm)',
                nameLocation: 'start',
                alignTicks: true,
                type: 'value',
                inverse: true
            },
            /* {
                name: '计算流量(m³/s)',
                type: 'value'
            } */
        ],
        series: [
            {
                name: '雨量',
                type: 'line',
                yAxisIndex: 1,
                areaStyle: {},
                lineStyle: {
                    width: 1
                },
                emphasis: {
                    focus: 'series'
                },
                data: yuliangList
            },
            {
                name: '实时流量',
                type: 'line',
                areaStyle: {},
                lineStyle: {
                    width: 1
                },
                emphasis: {
                    focus: 'series'
                },
                data: shishiList
            },
            {
                name: '计算流量',
                type: 'line',
                areaStyle: {},
                lineStyle: {
                    width: 1
                },
                emphasis: {
                    focus: 'series'
                },
                data: jisuanList
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    myChart.on('click', function (params) {
        console.log(params);
        console.log('left', params.event.offsetX);
        console.log('top', params.event.offsetY);
        console.log('val', params.data);
        console.log('index', params.dataIndex);
        console.log('seriesIndex', params.seriesIndex);
        console.log('当前选中字段', seriesList[params.seriesIndex]);
        curValue.value = params.data;
        curObj = params;
        // 打开输入框
        showChartTip(params.event.offsetX, params.event.offsetY);
    });

    // 将全屏按钮添加到图表上
    showFullScreen.value = true
    chartBox.value.appendChild(fullScreen.value);
};

// 将输入框添加到图表上
const showChartTip = (x, y) => {
    chartTipShow.value = true;
    // 避免定位超出图表
    if (x < (chartWidth.value - 160)) {
        chartTip.value.style.left = x + 'px';
    } else {
        chartTip.value.style.left = x - 80 + 'px';
    }
    if (y < chartHeight.value / 2) {
        chartTip.value.style.top = y + 'px';
    } else {
        chartTip.value.style.top = y - 20 + 'px';
    }

    if (chartBox.value) {
        // 插入到新的节点中
        chartBox.value.appendChild(chartTip.value);
    }
}

const handleEnter = () => {
    console.log('Enter key pressed', curValue.value);
    console.log(curObj)
    chartTipShow.value = false;
    if (curObj.data != curValue.value) { // 不相等发请求
        console.log('向后台发请求...')
        // 重新渲染图表

    }
};

// 初始化图表
onMounted(() => {
    drawChart();
});
</script>

<style lang="scss" scope>
.chart-box {
    position: relative;

    .tip-box {
        position: absolute;
        width: 200px;
        height: 50px;
        background-color: beige;
    }

    .chart-tip {
        position: absolute;
        display: block;
        width: 80px;

        input {
            width: 100%;
            background-color: #F7F9FC;
            border: 1px solid #E1E1E1;
            box-shadow: 0 0 3px #E1E1E1;
            padding: 2px 3px;
            border-radius: 3px;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            appearance: none;
        }

        input:focus {
            outline: none;
        }
    }

    .full-screen {
        display: inline-block;
        cursor: pointer;
        position: absolute;
        right: 0px;
        top: 0px;
        background-color: red;
    }
}

.chart-tip {
    display: none;
}
</style>